<template>
  <div class="wrapper">
    <div class="title">
      <span class="title__back iconfont" @click="handleBackClick"
        >&#xe6db;</span
      >
      <div class="title__text">新建收获地址</div>
      <div class="title__save" @click="handleSaveAddress">保存</div>
    </div>
    <div class="form">
      <div class="form__item">
        <div class="form__item__label">小区/大厦/学校:</div>
        <input class="form__item__content" placeholder="如理工大学国防科技园" />
      </div>
      <div class="form__item">
        <div class="form__item__label">楼号-门牌号:</div>
        <input class="form__item__content" placeholder="A号楼B层" />
      </div>
      <div class="form__item">
        <div class="form__item__label">收货人:</div>
        <input class="form__item__content" placeholder="请填写收货人的姓名" />
      </div>
      <div class="form__item">
        <div class="form__item__label">联系电话:</div>
        <input class="form__item__content" placeholder="请填写收货手机号" />
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
// import { useStore } from "vuex";
// import { post } from "@/utils/request";
import { toRef } from "vue";

export default {
  name: "AddAddress",
  setup() {
    // const store = useStore();
    const router = useRouter();
    const handleBackClick = () => {
      router.back();
    };
    const handleSaveAddress = () => {
      const { addAddress } = toRef({});
      return { addAddress };
    };
    return { handleBackClick, handleSaveAddress };
  },
};
</script>

<style lang="scss" scoped>
@import "./src/style/viriables.scss";
@import "./src/style/mixins.scss";
.wrapper {
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #f8f8f8;
}
.title {
  display: flex;
  line-height: 0.44rem;
  background-color: #fff;
  text-align: center;
  font-size: 0.16rem;
  &__back {
    width: 0.2rem;
    margin-left: 0.18rem;
    font-size: 0.2rem;
    color: #b6b6b6;
  }
  &__text {
    text-align: center;
    flex: 1;
  }
  &__save {
    margin-right: 0.2rem;
    font-size: 0.14rem;
  }
}
.form {
  padding: 0 0.2rem;
  margin-top: 0.12rem;
  background: #fff;
  border-top: 0.01rem solid #f1f1f1;
  border-bottom: 0.01rem solid #f1f1f1;
  &__item {
    display: flex;
    padding: 0.12rem 0;
    font-size: 0.14rem;
    border-bottom: 0.01rem solid #f1f1f1;
    &__label {
      margin-right: 0.05rem;
      color: #666;
    }
    &__content {
      flex: 1;
      border: none;
      outline: none;
      color: #3f3f3f;
    }
  }
}
</style>